<template>
  <div id="drop">
    <span v-show="isUpload" class="tip">拖拽图片/文件上传</span>
    <img src="" alt="" class="up-img" v-show="!isUpload" />
  </div>
</template>

<script>
import { nextTick, onMounted, ref } from '@vue/runtime-core';
export default {
  setup() {
    let isUpload = ref(true);
    // 当拖拽元素第一次进入触发
    function dragEnter(e) {
      e.stopPropagation();
      e.preventDefault();
    }
    //持续触发 当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)；这个事件在可被放置元素的节点上触发。
    function dragOver(e) {
      e.stopPropagation();
      e.preventDefault();
    }
    // 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，drop 事件被抛出
    function drop(e) {
      e.preventDefault();
      // 当文件拖拽到dropBox区域时,可以在该事件取到file
      var file = e.dataTransfer.files[0];
      var _type = file.type;
      console.log(_type);
      //file.type; 文件类型
      //file.name;文件名
      //file.size; 文件大小 btye
      var img = document.getElementsByTagName('img')[0];
      const tip = document.querySelector('.tip');
      const dropBox = document.querySelector('#drop');

      //如果是图片
      if (_type.indexOf('image') > -1) {
        var dataURL = URL.createObjectURL(file);
        img.src = dataURL;
        isUpload.value = false;
      } else {
        // 粗略处理
        tip.innerText = '文件：' + file.name;
        isUpload.value = true;
      }

      var formData = new FormData();
      formData.append('file', file);
      // 隐藏加号
      dropBox.classList.add('hide');
      console.log(file);
    }
    onMounted(() => {
      nextTick();
      // 此处定义一个drop容器(省略),并取到该元素; 参数三默认为false，表示在事件冒泡阶段调用；当该值为true时，表示在事件捕获阶段调用。
      const dropBox = document.querySelector('#drop');
      dropBox.addEventListener('dragenter', dragEnter, false); //拖动后首次在进入某个控件内发生
      dropBox.addEventListener('dragover', dragOver, false); // 拖放对象悬浮拖放区域，在拖放区域移动会多次触发
      dropBox.addEventListener('drop', drop, false); // 源对象落在目标对象上
    });
    return {
      isUpload
    };
  },
  components: {}
};
</script>

<style scoped lang="scss">
#drop {
  width: 200px;
  height: 200px;
  border: 3px dashed #ccc;
  margin: 100px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 37%;
    width: 80px;
    margin-left: -40px;
    margin-top: -5px;
    border-top: 10px solid #ccc;
  }
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 37%;
    height: 80px;
    margin-left: -5px;
    margin-top: -40px;
    border-left: 10px solid #ccc;
  }
  .tip {
    position: absolute;
    bottom: 20px;
    z-index: 99;
  }
  .up-img {
    width: 200px;
  }
}
.hide {
  &::after {
    display: none;
  }
  &::before {
    display: none;
  }
}
</style>
